<template>
    <div>
        <el-dialog title="客户转派" :visible.sync="importReassignment" width="30%">
            <div class="assign">
                <el-input v-model="assignName" placeholder="请输入销售姓名" @blur="searchWeUser()"></el-input>
                <div style="margin: 15px 0;"></div>
                <el-checkbox-group v-model="checkedSales" @change="handleCheckedSalesChange" class="selectBox">
                    <el-checkbox v-for="item in sales" :label="item" :key="item.userId"
                        :class="[checkList.includes(item.userId) ? 'nameSelectActive' : 'nameSelect']">
                        {{ item.userName }}</el-checkbox>
                </el-checkbox-group>
            </div>
            <div slot="footer">
                <el-button type="primary" @click="activeAssign">立即转派</el-button>
                <el-divider></el-divider>
            </div>
        </el-dialog>
        <el-dialog title="转派结果" :visible.sync="assignResultVisible" width="30%">
            <div>
                <p>转派成功</p>
            </div>
            <div slot="footer">
                <el-button type="primary" @click="assignResultVisible = false">返回</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import { getAllWeUser, customerForward } from "@/api/customer/customerManage"
export default {
    props: {
        toAssign: {
            type: Object,
            dafault: null,
        },
    },
    data() {
        return {
            // 分配客户
            assignName: '',
            checkedSales: [],
            sales: [],
            assignResultVisible: false,
            loadingrefresh: false,
            checkedAll: false,//全选
            checkList: [],
            importReassignment: false,
        }
    },
    computed: {
    },
    mounted() {
        this.searchWeUser();
    },
    methods: {
        // 打开对话框
        openReassignmentVisible() {
            this.importReassignment = true;
        },
        handleCheckedSalesChange() {
            if (this.checkedSales.length > 1) {
                let onlyUser = this.checkedSales.splice(1);
                this.checkedSales = onlyUser;
            }
            this.checkInputHide();
        },
        checkInputHide() {
            // 点击触发
            this.checkList = [];
            this.checkedSales.forEach(item => {
                this.checkList.push(item.userId);
            });
        },
        // 获取全部员工
        getAllUser(params) {
            getAllWeUser(params).then(res => {
                if (res.code === 200) {
                    this.sales = res.data || [];
                }
            }).catch(() => {
                console.log('error submit!!');
            });
        },
        // 搜索员工
        searchWeUser() {
            const params = {
                department: "",
                userName: this.assignName,
            };
            this.getAllUser(params);
        },
        // 立即分配
        activeAssign() {
            const params = {
                ...this.toAssign,
                "sysUserId": this.checkedSales[0].userId
            };
            customerForward(params).then(res => {
                if (res.code === 200) {
                    this.importReassignment = false;
                    this.assignResultVisible = true;
                    this.$parent.getList();
                }
            }).catch(() => {
                console.log('error submit!!');
            });
        },
    },
}
</script>
<style lang="scss" scoped>
.assign {
    padding: 0 10px;

    .el-input {
        margin-top: 5px;
        margin-bottom: 5px;
    }

    .nameSelect {
        display: flex;
        align-items: center;
    }

    .nameSelectActive {
        display: flex;
        align-items: center;
        background: #FFEEEB;
    }

    .selectBox {
        width: 100%;
        height: 120px;
        overflow-y: scroll;
        margin-top: 10px;
    }
}
</style>
